/** global constants */
var main_type = 1, sub_type = 2;
var max_visible_sub_cmts = 5;
var spec_c = '!!sp_c!!';

var info_div_id = 'info-div-';
var main_input_div_id = 'main-input-div-';
var main_div = 'main-div';
var relation_div = 'relation-div';
var main_container_div_id = 'main-container-div-';
var div_id = 'div-';
var sub_div_id = 'sub-div-';
var container_div_id = 'container-div-';
var sub_input_div_id = 'sub-input-';
var extra_tool_div_id = 'extra-tool-div-';
var hidden_data_div_id = 'hidden-data-div-';
var input_div_id = 'input-div-';
var extra_data_div_id = 'extra-data-div-';
var rel_div_id = 'rel-div-';
var view_more_div_id = 'view-more-div-';
var view_more_a_id = 'view-more-a-';
var view_all_a_id = 'view-all-';
var follow_close_image_id = 'follow-close-image-';
var main_text_input_id = 'main-text-input-';
var input_img_div_id = 'input-img-div-';
var sub_text_input_id = 'sub-text-input-';
var main_input_img_div_id = 'main-input-img-div-';
var sub_td_id = 'sub-td-';

/** global variables */
var g_cpaging = 0;
var g_owner_id = 0;
var g_owner_fname = '';
var g_owner_img = '';
var g_author_id = 0;
var g_window_idx = 0;
var g_num_remain_cmts = 0;


function drawComments(xml){
	$(xml).find('error').each(function(){
		var type = $(this).find('type').text();
		var msg = $(this).find('message').text();
		$('#'+main_div).
		append(
			drawError(type, msg));
		return;
	});
	
	var ownerId = 0, o_fstName = '', o_fname = '', o_acc = '',
		o_dob = '', o_addr = '', o_img = '', o_desc = '';
	$(xml).find('owner').each(function(){
		ownerId = $(this).attr('id');
		g_owner_id = ownerId;
		o_fstName = $(this).attr('o_fstName');
		o_fname = $(this).attr('o_fname');
		g_owner_fname = o_fname;
		o_acc = $(this).attr('o_acc');
		o_dob = $(this).attr('o_dob');
		o_addr = $(this).attr('o_addr');
		o_img = $(this).attr('o_img');
		g_owner_img = o_img;
		o_desc = $(this).attr('o_desc');
	});
	
	$(xml).find('config').each(function(){
		g_cpaging = $(this).attr('c_paging');
	});
	
	var aut_id = 0, aut_fstName = '', aut_fname = '', aut_acc = '',
		aut_dob = '', aut_addr = '', aut_img = '', aut_desc = '';
	$(xml).find('author').each(function(){
		aut_id = $(this).attr('id');
		g_author_id = aut_id;
		aut_fstName = $(this).attr('a_fstName');
		aut_fname = $(this).attr('a_fname');
		aut_acc = $(this).attr('a_acc');
		aut_dob = $(this).attr('a_dob');
		aut_addr = $(this).attr('a_addr');
		aut_img = $(this).attr('a_img');
		aut_desc = $(this).attr('a_desc');
	
		$('<div class="main-comment" id="'+info_div_id+aut_id+'"></div>').
		html(
			drawInfoTable(aut_id, aut_fstName, aut_fname, 
					aut_acc, aut_dob, aut_addr, aut_img, aut_desc) + '<br><br>').
		appendTo('#'+main_div);
	
		if (aut_id == ownerId){
			$('<div class="" id="'+main_input_div_id+ownerId+'"></div>').
			html(
				drawMainInput(ownerId, o_fname, o_img) + '<br><br>').
			appendTo('#'+main_div);
			inputLostFocus(main_type, ownerId, 0);
		}
	});
	
	$('<div id="'+main_container_div_id+ownerId+'"></div>').html('').
	appendTo('#'+main_div);
	
	var num_main_comments = 0;
	$(xml).find('comments').each(function(){
		$(xml).find('comment').each(function(){
			num_main_comments++;
			var num_sub_comment = 0;
			var id = $(this).attr('id');
			var parentId = $(this).attr('parentId');
			var authorId = $(this).attr('authorId');
			var a_fname = $(this).attr('a_fname');
			var a_img = $(this).attr('a_img');
			var date = $(this).attr('postDate');
			var content = $(this).attr('content');

			$('<div class="main-comment" id="'+div_id+id+'"></div>').
			html(
				drawMainComment(id, authorId, a_fname, a_img, date, content, null, null) + '<br><br>').
			appendTo('#'+main_container_div_id+ownerId);
			
			$(this).find('sub-comment').each(function(){
				num_sub_comment++;
				var sub_id = $(this).attr('id');
				var sub_authorId = $(this).attr('authorId');
				var sub_a_fname = $(this).attr('a_fname');
				var sub_a_img = $(this).attr('a_img');
				var sub_date = $(this).attr('postDate');
				var sub_content = $(this).attr('content');
				
				$('<div class="sub-comment" id="'+sub_div_id+sub_id+'"></div>').
				html(
					drawFollowComment(id, sub_id, sub_authorId, 
							sub_a_fname, sub_a_img, sub_date, sub_content)).
				appendTo('#'+container_div_id+id);
				
				dfc_addSubButtons(sub_id, g_owner_id == g_author_id || g_owner_id == sub_authorId);
			});
			
			drawExtraTools(id, num_sub_comment);
			
			$('<div class="sub-comment" id="'+sub_input_div_id+id+'"></div>').
			html(
				drawInput(id, /*parentId, */ownerId, o_fname, o_img)).
			appendTo('#'+input_div_id+id);
			inputLostFocus(sub_type, id, 0);
		});
	});

	drawViewMoreCmts(aut_id, g_window_idx, num_main_comments >= g_cpaging);
	$('textarea').autogrow();
}

function drawMoreComments(xml){
	$(xml).find('error').each(function(){
		var type = $(this).find('type').text();
		var msg = $(this).find('message').text();
		$('#'+main_div).
		append(
			drawError(type, msg));
		return;
	});

	var num_main_comments = 0;
	$(xml).find('comments').each(function(){
		$(xml).find('comment').each(function(){
			num_main_comments++;
			var num_sub_comment = 0;
			var id = $(this).attr('id');
			var parentId = $(this).attr('parentId');
			var authorId = $(this).attr('authorId');
			var a_fname = $(this).attr('a_fname');
			var a_img = $(this).attr('a_img');
			var date = $(this).attr('postDate');
			var content = $(this).attr('content');

			$('<div class="main-comment" id="'+div_id+id+'"></div>').
			html(
				drawMainComment(id, authorId, a_fname, a_img, date, content, null, null) + '<br><br>').
			appendTo('#'+main_container_div_id+g_owner_id);
			
			$(this).find('sub-comment').each(function(){
				num_sub_comment++;
				var sub_id = $(this).attr('id');
				var sub_authorId = $(this).attr('authorId');
				var sub_a_fname = $(this).attr('a_fname');
				var sub_a_img = $(this).attr('a_img');
				var sub_date = $(this).attr('postDate');
				var sub_content = $(this).attr('content');
				
				$('<div class="sub-comment" id="'+sub_div_id+sub_id+'"></div>').
				html(
					drawFollowComment(id, sub_id, sub_authorId, 
							sub_a_fname, sub_a_img, sub_date, sub_content)).
				appendTo('#'+container_div_id+id);
				
				dfc_addSubButtons(sub_id, g_owner_id == g_author_id || g_owner_id == sub_authorId);
			});
			
			drawExtraTools(id, num_sub_comment);
			
			$('<div class="sub-comment" id="'+sub_input_div_id+id+'"></div>').
			html(
				drawInput(id, /*parentId, */g_owner_id, g_owner_fname, g_owner_img)).
			appendTo('#'+input_div_id+id);
			inputLostFocus(sub_type, id, 0);
		});
	});
	
	drawViewMoreCmts(g_author_id, g_window_idx, num_main_comments >= g_cpaging);
	$('textarea').autogrow();
}

function drawViewMoreCmts(a_id, offs, isMoreComment){
	if (a_id == 0) return;
	
	if (offs == 0){
		$('<div id="'+view_more_div_id+a_id+'"></div>').html(
			'<table width="100%" class="table-info"><tr><td align="center">' +
			'	<a id="'+view_more_a_id+a_id+'"></a>' +
			'</td></tr></table><br><br>'
		).appendTo('#'+main_div);
	}
	
	if (!isMoreComment){
		$('#'+view_more_a_id+a_id).text('no more comment');
		$('#'+view_more_a_id+a_id).off('click');
		return;
	}
	
	$('#'+view_more_a_id+a_id).text('view next comments');
	$('#'+view_more_a_id+a_id).click(function(){
		$.get('./mainservlet?req=mrcs&offs='+(offs+1)+'&aId='+a_id, 
				drawMoreComments, "xml");
	});
	g_window_idx++;
}

function drawExtraTools(id, num_hidden_cmts){
	$('#'+extra_tool_div_id+id).empty();
	var hid_data = num_hidden_cmts + spec_c;
	$('#'+hidden_data_div_id+id).text(hid_data);
	
	if (num_hidden_cmts >= max_visible_sub_cmts){
		var view_all = 'view all '+num_hidden_cmts+' comments';
		$('#'+container_div_id+id).hide();
		$('<div></div>').
			html('' +
			'<table cellpadding="1" cellspacing="1" width="100%" height="20px"><tr><td class="td-general" align="center" width="15px">'+
			'	<img src="./images/common/talk.png" width="13px"/>' +
			'</td><td class="td-general" align="left" >' +
			'	&nbsp;&nbsp;<a id="'+view_all_a_id+id+'">'+view_all+'</a>' +
			'</td></tr></table>').
			appendTo('#'+extra_tool_div_id+id);
		$('#'+view_all_a_id+id).click(function(){
			$('#'+container_div_id+id).toggle('fast',function(){
				$('#'+view_all_a_id+id).text(
					!$('#'+container_div_id+id).is(":visible") ? 
							view_all : 'hide all');
			});
		    return false;
		});
	}
}

function drawMainInput(o_id, o_fname, o_img){
	return '' +
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#d7d7ff" width="450px"><tr><td>' +
	'<table cellpadding="2" cellspacing="0" border="0" width="450px" bgcolor="#ffffff">' +
	'	<tr><td class="td-general" align="left" style="margin-left: 5px; " colspan="2">' +
	'		<font class="date-comment">&nbsp;&nbsp;what\'s in your mind?</font>' +
	'	</td><tr><tr><td align="left" style="margin-left: 5px; " colspan="2">' +
	'		&nbsp;<textarea class="input-text" id="'+main_text_input_id+o_id+'" rows="2" cols="83" ' + 
	'			onfocus="inputOnFocus('+main_type+','+o_id+');" ' +
	'			onblur="inputLostFocus('+main_type+','+o_id+',1);" ' +
	'			onkeyup="checkKey('+main_type+',0,'+o_id+',\''+o_fname+'\',\''+o_img+'\');">' +
	'		</textarea>' +
	'	</td></tr><tr><td class="td-general" align="left">' +
	'		<table width="100%" cellspacing="1"><tr><td>' +
	'			<input type="image" src="./images/common/image_upload.png" title="upload image" width="18px" onclick="add_image_file();" />' + 
	'		</td></tr></table>' +
	'	</td><td class="td-general" align="right">' +
	'		<input type="button" name="post" value="post" ' +
	'			onclick="checkKey('+main_type+',0,'+o_id+',\''+o_fname+'\',\''+o_img+'\');">&nbsp;&nbsp;' +
	'	</td></tr>' +
	'</table></td></tr>' +
	'</table>';
}

function drawMainComment(id, authorId, a_fname, a_img, date, content, url, content_ex){
	return '' +
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#d7d7ff" width="450px"><tr><td>' +
	'<table cellpadding="2" cellspacing="0" border="0" width="450px" bgcolor="#ffffff">' +
	'	<tr><td align="center"><table width=100% cellpadding="3"><tr><td>' +
	'	<table width="100%" cellpadding="0">' +
	'		<tr><td class="td-left-image" align="center" valign="top"><img src="'+a_img+'" width="35px"/></td>' +
	'		<td align="left" valign="top">' +
	'			&nbsp;<a href="./main.m?aId='+authorId+'">'+a_fname+'</a><br>' +
	'			&nbsp;<font class="date-comment">'+date+'</font>' +
	'		</td></tr>' + 
	'		<tr><td colspan="2" valign="top" height="3px">' +
	'			<hr size="1" color="#e6e6e6"/>' +
	'		</td></tr>' + 
	'		<tr><td colspan="2" valign="top" align="left">'+content+'<br><br>' +
	'		</td></tr>' +
	'		<tr><td colspan="2" valign="top" height="1px">' +
	'			<hr size="1" color="#e6e6e6"/>' +
	'		</td></tr>' +
	'		<tr><td colspan="2" valign="top">' +
	'			<div id="'+extra_data_div_id+id+'"></div>' +
	'			<div id="'+hidden_data_div_id+id+'" style="visibility:hidden; height:0px;"></div>' +
	'		</td></tr>' +
	'		<tr><td colspan="2" valign="top">' +
	'			<div id="'+extra_tool_div_id+id+'"></div>' +
	'		</td></tr>' +
	'		<tr><td colspan="2" valign="top" align="left">' +
	'			<div id="'+container_div_id+id+'"></div>' +
	'		</td></tr>'	+
	'		<tr><td colspan="2" valign="top" align="left">' +
	'			<div id="'+input_div_id+id+'"></div>' +
	'		</td></tr>' +
	'	</table></td></tr>' +
	'	</table></td></tr>' +
	'</table></td></tr>' +
	'</table>';
}

function drawFollowComment(main_id, id, authorId, a_fname, a_img, date, content){
	return '' + 
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#ffffff" width="100%"><tr><td>' +
	'<table class="sub-comment" width="100%" cellpadding="2" cellspacing="0" bgcolor="#f4f5ff">' +
	'	<tr><td class="td-left-image" align="center" valign="top"><img src="'+a_img+'" width="35px"/></td>' +
	'	<td bgcolor="#f4f5ff" valign="top">' +
	'		<a href="./main.m?aId='+authorId+'">'+a_fname+'</a>&nbsp;' + content +
	'		<br><font class="date-comment">'+date+'</font>' +
	'	</td><td id="'+sub_td_id+id+'" width="14px" valign="top">' +
	'		<input type="image" id="'+follow_close_image_id+id+'" width="10px" ' +
	'			src="./images/common/close_cmt.png" ' +
	'			onclick="deleteFollowComment('+main_id+','+id+');"/>' +
	'	</td></tr>' +
	'</table></td></tr>' +
	'</table>';
}

function dfc_addSubButtons(id, isSameAuthor){
	$('#'+follow_close_image_id+id).hide();
	if (isSameAuthor){
		$('#'+sub_td_id+id).bind("mouseenter",function(){
			$('#'+follow_close_image_id+id).show('fast');
		}).bind("mouseleave",function(){
			$('#'+follow_close_image_id+id).hide('fast');
		});
	}
}

function deleteFollowComment(main_id, sub_id){
	if (confirm('are you sure you want to delete this comment?')){
		$.get('./mainservlet?req=del&id='+sub_id, function(xml){
			$(xml).find('result').each(function(){
				var retCode = $(this).find('return-code').text();
				var data = $(this).find('data').text();

				if (retCode == 200){
					$('#'+sub_div_id+sub_id).remove();
					
					var hid_data = $('#'+hidden_data_div_id+main_id).text().split(spec_c);
					var new_num_sub_cmts = hid_data[0] - 1;
					drawExtraTools(main_id, new_num_sub_cmts);
				}else{
					alert (data);
				}
			});
		}, "xml");
	}
}

function drawInput(id, /*parentId, */authorId, a_fname, a_img){
	return '' +
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#ffffff" width="100%"><tr><td>' +
	'<table class="sub-comment" width="100%" cellpadding="2" cellspacing="0" bgcolor="#f4f5ff">' +
	'	<tr><td class="td-general" align="center" width="1px">' +
	'		<div id="'+input_img_div_id+id+'" align="center" valign="top"><img src="'+a_img+'" width="35px"/></div>' +
	'	</td><td bgcolor="#f4f5ff" width="380px">' +
	'		<textarea class="input-text" id="'+sub_text_input_id+id+'" rows="1" cols="78" '+ 
	'			onfocus="inputOnFocus('+sub_type+','+id+');" ' +
	'			onblur="inputLostFocus('+sub_type+','+id+',0);" ' +
	'			onkeyup="checkKey('+sub_type+','+id+','+authorId+',\''+a_fname+'\',\''+a_img+'\');"></textarea>' +
	'	</td></tr>' +
	'</table></td></tr>' +
	'</table>';
}

function drawError(type, msg){
	return '' +
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#4682B4" width="350"><tr><td>' +
	'<table cellpadding="2" cellspacing="0" border="0" width="350" bgcolor="#DBEAF5">' +
	'	<tr><td colspan="2">&nbsp;</td></tr>' +
	'	<tr><td align="center">' +
	'		<font class="button" color="red">'+type+': '+msg+'</font>' +
	'	</td></tr>' +
	'	<tr><td colspan="2">&nbsp;</td></tr>' +
	'</table></td></tr>'+
	'</table>';
}

function drawMainAddedComment(xml){
	$(xml).find('result').each(function(){
		var retCode = $(this).find('return-code').text();
		var data = $(this).find('data').text().split(spec_c);

		if (retCode == 200){ 
			var id = data[0];
			var a_id = data[1];
			var a_fname = data[2];
			var a_img = data[3];
			var content = data[4];
			var url = data[5];
			var content_ex = data[6];
			var date = data[7];
			
			$('#'+main_container_div_id+a_id).prepend(
				$('<div class="main-comment" id="'+div_id+id+'"></div>').html(
					drawMainComment(id, a_id, a_fname, a_img, date, content, url, content_ex) + '<br><br>').fadeIn('slow')
			);
			
			drawExtraTools(id, 0);
			
			$('<div class="sub-comment" id="'+sub_input_div_id+id+'"></div>').
			html(
				drawInput(id, /*parentId, */a_id, a_fname, a_img)).
			appendTo('#'+input_div_id+id);
			inputLostFocus(sub_type,id,0);
			
			$('textarea').autogrow();
		}else{
			alert (data);
		}
	});
}

function drawAddedComment(xml){
	$(xml).find('result').each(function(){
		var retCode = $(this).find('return-code').text();
		var data = $(this).find('data').text().split(spec_c);

		if (retCode == 200){ 
			var sub_id = data[0];
			var id = data[1];
			var sub_authorId = data[2];
			var sub_a_fname = data[3];
			var sub_a_img = data[4];
			var sub_content = data[5];
			var sub_url = data[6];
			var sub_contentEx = data[7];
			var sub_date = data[8];
			$('<div class="sub-comment" id="'+sub_div_id+sub_id+'"></div>').
			html(
				drawFollowComment(id, sub_id, sub_authorId, 
						sub_a_fname, sub_a_img, sub_date, sub_content)).
			appendTo('#'+container_div_id+id);
			
			dfc_addSubButtons(sub_id, g_owner_id == g_author_id || g_owner_id == sub_authorId);
			
			var hid_data = $('#'+hidden_data_div_id+id).text().split(spec_c);
			var new_num_sub_cmts = ++hid_data[0];
			drawExtraTools(id, new_num_sub_cmts);
		}else{
			alert (data);
		}
	});
}

function inputOnFocus(type, id){
	var img_div_name = '', text_name = '';
	if (type == main_type){
		img_div_name = '#'+main_input_img_div_id;
		text_name = '#'+main_text_input_id;
	}else if (type == sub_type){
		img_div_name = '#'+input_img_div_id;
		text_name = '#'+sub_text_input_id;

		$(img_div_name+id).show();
		$(text_name+id).attr('cols', 72);
	}
}

function inputLostFocus(type, id, isForceClean){
	var img_div_name = '', text_name = '';
	if (type == main_type){
		img_div_name = '#'+main_input_img_div_id;
		text_name = '#'+main_text_input_id;
	}else if (type == sub_type){
		img_div_name = '#'+input_img_div_id;
		text_name = '#'+sub_text_input_id;
	
		$(img_div_name+id).hide();
		$(text_name+id).attr('cols', 78);
	}
	
	if (!isForceClean){
		$(text_name+id).val(null);
	}
}

function checkKey(type, id, authorId, a_fname, a_img){
	var wEvent = window.event;
	if (wEvent.keyCode == 13 && !wEvent.shiftKey){
		if (type == main_type){
			saveMainInput(authorId, a_fname, a_img);
			$('#'+main_text_input_id+authorId).val(null);
		}else if (type == sub_type){
			saveSubInput(id, authorId, a_fname, a_img);
			$('#'+sub_text_input_id+id).val(null);
		}
		wEvent.stopPropagation();
	}
}

function saveMainInput(o_id, o_fname, o_img){
	var content = $('#'+main_text_input_id+o_id).val();
	var url = '';
	var content_ex = '';
	var date = getCurrentTime();
	var data = '{' +
			o_id+spec_c+
			o_fname+spec_c+ 
			o_img+spec_c+
			content+spec_c+
			url+spec_c+
			content_ex+spec_c+
			date+'}';
	$.get("./mainservlet?req=madd&data="+data, 
			drawMainAddedComment, "xml");
}

function saveSubInput(id, authorId, a_fname, a_img){
	var content = $('#'+sub_text_input_id+id).val();
	var date = getCurrentTime();
	var data = '{'+id+spec_c+
			authorId+spec_c+
			a_fname+spec_c+ 
			a_img+spec_c+
			content+spec_c+
			spec_c+spec_c+
			date+'}';
	$.get("./mainservlet?req=add&data="+data, 
			drawAddedComment, "xml");
}

function drawRelations(xml){
	$(xml).find('error').each(function(){
		$('<div></div>').html(
				'<table width="100%">' +
				'<tr><td align="center" valign="middle" class="header2" style="height: 20px;">' +
				'	no friend!'+
				'</td></tr>' +
				'</table>'
			).appendTo('#'+relation_div);
	});
	
	$(xml).find('relations').each(function(){
		var a_fstName = $(this).attr('a_fstName');
		$('<div></div>').html(
			'<table width="100%" ><tr>' +
			'<td align="center" valign="middle" class="header2" style="height: 20px;">' +
			'	'+a_fstName+'\'s friends'+
			'</td></tr>' +
			'</table>'
		).appendTo('#'+relation_div);

		$(xml).find('relation').each(function(){
			var id = $(this).attr('id');
			var f_id = $(this).attr('f_id');
			var f_fname = $(this).attr('f_fname');
			var f_img = $(this).attr('f_img');
			var f_startDate = $(this).attr('f_startDate');
			var f_type = $(this).attr('f_type');
			var f_desc = $(this).attr('f_desc');
		
			$('<div class="main-comment" id="'+rel_div_id+id+'"></div>').
			html(
				drawRelation(f_id, f_fname, f_img, f_startDate, f_type)).
			appendTo('#'+relation_div);
		});
	});
	
	
}

function drawRelation(f_id, f_fname, f_img, f_startDate, f_type){
	return '' + 
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#ffffff" width="100%"><tr><td>' +
	'<table class="sub-comment" width="100%" cellpadding="2" cellspacing="0" bgcolor="#f4f5ff">' +
	'	<tr><td class="td-center-image" align="center" >' +
	'		<img src="'+f_img+'" width="80px"/></td>' +
	'	</tr><tr><td class="td-center-image" align="center" >' +
	'		<a href="./main.m?aId='+f_id+'">'+f_fname+'</a>' +
	'	</td></tr>' +
	'</table></td></tr>' +
	'</table>';	
}

function drawInfoTable(id, o_fstName, o_fname, o_acc, 
		o_dob, o_addr, o_img, o_desc){
	return '' +
	'<table cellpadding="0" cellspacing="1" border="0" bgcolor="#ffffff" width="100%"><tr><td>' +
	'<table class="table-info" width="100%" cellpadding="2" cellspacing="5" bgcolor="#f4f5ff">' +
	'	<tr><td width="125px" align="right">' +
	'		<img src="'+o_img+'" width="120px"/></td>' +
	'	<td valign="top" align="left">' +
	'		<b><a href="./user.m?id='+id+'">'+o_fname+'</a></b><br>' +
	'		<hr color="#e6e6e6" width="100%" size="1">' +
	'		<font color="#a2a2a2">'+o_dob+'</font><br>' +
	'		<font color="#a2a2a2">'+o_addr+'</font><br>' +
	'	</td></tr>' +
	'</table></td></tr>' +
	'</table>';	
}